<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <!DOCTYPE html>
  <html lang="zh">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插件市场</title>
    <link rel="stylesheet" href="styles.css">

    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
      }

      header {
        background-color: #007BFF;
        color: white;
        padding: 15px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      header .logo {
        font-size: 24px;
        font-weight: bold;
      }

      nav ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
        display: flex;
      }

      nav ul li {
        margin: 0 15px;
      }

      nav ul li a {
        color: white;
        text-decoration: none;
      }

      nav ul li a:hover {
        text-decoration: underline;
      }

      main {
        padding: 20px;
      }

      .search-bar {
        margin-bottom: 20px;
        display: flex;
      }

      .search-bar input[type="text"] {
        flex: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
      }

      .search-bar button {
        padding: 10px 15px;
        border: none;
        background-color: #007BFF;
        color: white;
        border-radius: 4px;
        margin-left: 10px;
        cursor: pointer;
      }

      .search-bar button:hover {
        background-color: #0056b3;
      }

      .plugin-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
      }

      @media (max-width: 600px) {

        /* 小于600px宽度时 */
        .plugin-list {
          grid-template-columns: repeat(2, 1fr);
          /* 每行2列 */
        }
      }

      @media (max-width: 400px) {

        /* 小于400px宽度时 */
        .plugin-list {
          grid-template-columns: 1fr;
          /* 每行1列 */
        }
      }


      .plugin-item {
        background-color: white;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 15px;
        text-align: center;
        transition: box-shadow 0.3s;
      }

      .plugin-item:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
      }

      footer {
        text-align: center;
        padding: 10px;
        background-color: #007BFF;
        color: white;
        position: relative;
        bottom: 0;
        width: 100%;
        margin-top: 20px;
      }
    </style>
  </head>

  <body>
    <header>
      <div class="logo">插件市场</div>
      <nav>
        <ul>
          <li><a href="#">首页</a></li>
          <li><a href="#">插件分类</a></li>
          <li><a href="#">最新插件</a></li>
          <li><a href="#">热门插件</a></li>
          <li><a href="#">关于我们</a></li>
        </ul>
      </nav>
    </header>

    <main style="height: 70vh;">
      <section class="search-bar">
        <input type="text" placeholder="搜索插件...">
        <button>搜索</button>
      </section>

      <section class="plugin-list">
        <div class="plugin-item">
          <h3>插件名称 1</h3>
          <p>插件描述 1</p>
          <button>安装</button>
        </div>
        <div class="plugin-item">
          <h3>插件名称 2</h3>
          <p>插件描述 2</p>
          <button>安装</button>
        </div>
        <div class="plugin-item">
          <h3>插件名称 3</h3>
          <p>插件描述 3</p>
          <button>安装</button>
        </div>
        <div class="plugin-item">
          <h3>插件名称 4</h3>
          <p>插件描述 4</p>
          <button>安装</button>
        </div>
        <!-- 可以继续添加更多插件 -->
      </section>
    </main>

    <footer>
      <p>&copy; 2024 插件市场. 版权所有.</p>
    </footer>
  </body>

  </html>

</body>

</html>